<template>
  <div class="regulationInfo">
    <div class="app-container">
      <basic-container class="view" v-if="isView">
        <div>
          <div class="tt">
            <div class="title">{{regulationForm.regulationName}}</div>
            <div class="time">发布时间:{{regulationForm.updateTime}}</div>
          </div>
          <p class="content" v-html="regulationForm.description"></p>
          <p class="fileDownloadTitle">附件下载</p>
          <el-table
                  :data="regulationForm.regulationFilesArray"
                  border
                  style="width: 100%">
            <el-table-column
                    header-align="center"
                    align="center"
                    prop="updateTime"
                    label="上传时间">
            </el-table-column>
            <el-table-column
                    header-align="center"
                    align="center"
                    prop="original"
                    label="附件">
            </el-table-column>
            <el-table-column
                    header-align="center"
                    align="center"
                    label="下载">
              <template slot-scope="scope">
                <el-button @click="downloadFun(scope.row)" type="text"  icon="el-icon-download"  size="small">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </basic-container>
      <basic-container class="edit" v-else>
          <el-form
                  ref="regulationForm"
                  :model="regulationForm"
                  label-width="100px"
          >
            <el-row>
              <!--<el-col :span="12">
                <el-form-item label="制度编号">
                  <el-input v-model="regulationForm.regulationNo" type="text"/>
                </el-form-item>
              </el-col>-->
              <el-col :span="12">
                <el-form-item label="制度分类">
                  <avue-input-tree
                          style="width: 100%"
                          v-model="regulationForm.regulationCategory"
                          :node-click="getCtgNodeData"
                          :dic="regulationTreeData"
                          :props="defaultCtgProps"
                          placeholder="请选择制度分类"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="制度名称">
                  <el-input v-model="regulationForm.regulationName" type="text"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="发布范围">
                  <avue-input-tree
                          style="width: 100%"
                          v-model="regulationForm.deptId"
                          :node-click="getNodeData"
                          :dic="treeDeptData"
                          :props="defaultProps"
                          placeholder="请选择所属部门"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否置顶">
                  <el-radio-group v-model="regulationForm.isTop">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="描述">
              <avue-ueditor v-model="regulationForm.description" :options="options"></avue-ueditor>
            </el-form-item>
            <el-form-item label="附件">
              <el-upload
                      ref="upload"
                      :headers="headers"
                      :on-success="handleAvatarSuccess"
                      class="avatar-uploader"
                      action="/admin/sys-file/upload"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :on-exceed="handleExceed"
                      :file-list="fileList"
              >
                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
        </el-form>
      </basic-container>
    </div>
    <div class="btns">
      <el-button  @click="cancelFun">取消</el-button>
      <el-button type="primary" @click="sureFun" v-if="!isView">确定</el-button>
    </div>
  </div>
</template>
<script>
    import avueUeditor from 'avue-plugin-ueditor';
    import store from "@/store";
    import { fetchTree } from "@/api/admin/dept";
    import { getObj } from "@/api/ems/repository/emsregulations";
    import { delObj } from "@/api/admin/sys-file";
    export default {
        name: 'Info',
        component:{
            avueUeditor
        },
        data() {
            return {
                fileSuccessList: [],
                fileList: [],
                treeCtgData: [],
                defaultCtgProps: {
                    label: "name",
                    value: "id"
                },
                treeDeptData: [],
                defaultProps: {
                    label: "name",
                    value: "id"
                },
                options: {
                    //普通图片上传
                    action: "/admin/sys-file/upload",
                    customConfig: {},//wangEditor编辑的配置
                    props: {
                        res: "data",
                        url: "url"
                    }
                },
                avatarUrl: "",
                headers: {
                    Authorization: "Bearer " + store.getters.access_token,
                },
                regulationForm: {
                    regulationName: '',
                    regulationNo: '',
                    regulationCategory: "",
                    classification: "",
                    deptId: "",
                    isTop: '0',
                    description: "",
                    delFlag: 0,
                    regulationFileIdsArray: [],
                },
                rules: {
                    password: [
                        {
                            required: true,
                            min: 6,
                            message: "原密码不少于6位",
                            trigger: "blur",
                        },
                    ],
                    newpassword1: [
                        {
                            required: false,
                            min: 6,
                            message: "新密码不少于6位",
                            trigger: "blur",
                        },
                    ],
                },
            };
        },
        props: {
            regulationTreeData:{
                type: Array,
                default:() => {
                    return []
                }
            },
            regulationId: {
                type: Number,
                default:() => {
                    return null
                }
            },
            isView: {
                type: Boolean,
                default:() => {
                    return false
                }
            }
        },
        created(){
            this.getDeptTreeList();
        },
        mounted(){
          if(this.regulationId){
              this.getObjFun()
          }else{
              this.regulationForm = {
                  regulationName: '',
                  regulationNo: '',
                  regulationCategory: "",
                  classification: "",
                  deptId: "",
                  isTop: '0',
                  description: "",
                  delFlag: 0,
                  regulationFileIdsArray: [],
              }
              this.fileList = []
          }
        },
        methods: {
            downloadFun(row){
                window.location.href = row.url
            },
            getObjFun(){
                // 查询规章制度详情
                let me = this;
                getObj(this.regulationId).then((res) => {
                    let resData = res.data;
                    me.regulationForm = resData.data;
                   /* me.regulationForm.regulationNo = resData.data.regulationNo
                    me.regulationForm.regulationName = resData.data.regulationName
                    me.regulationForm.regulationCategory = resData.data.regulationCategory
                    me.regulationForm.deptId = resData.data.deptId
                    me.regulationForm.isTop = resData.data.isTop
                    me.regulationForm.description = resData.data.description
                    me.regulationForm.regulationFileIdsArray = resData.data.fileIds
                    me.fileList = resData.data.regulationFilesArray*/
                    me.fileList = resData.data.regulationFilesArray
                    me.fileList.forEach(item=>{item.name = item.original});
                });
            },
            sureFun(){
                this.$emit('sureFun', this.regulationForm, this.regulationId)
            },
            cancelFun(){
                this.$emit('cancelFun')
            },
            getCtgNodeData() {
            },
            getDeptTreeList(){
                // 查询部门树
                fetchTree().then((response) => {
                    this.treeDeptData = response.data.data;
                });
            },
            getNodeData() {
            },
            handleRemove(file, fileList) {
                if (file && file.response && file.response.data) {
                    //在执行删除
                    let { fileId } = file.response.data;
                    const i = this.regulationForm.regulationFileIdsArray.indexOf(fileId);
                    if(i != -1){
                        this.regulationForm.regulationFileIdsArray.splice(i, 1);
                        delObj(fileId).then((res) => {
                            this.$message.success("删除成功");
                        });
                    }
                }else{
                    //在执行删除
                    let id = file.id;
                    const i = this.regulationForm.regulationFileIdsArray.indexOf(id);
                    if(i != -1){
                        this.regulationForm.regulationFileIdsArray.splice(i, 1);
                        delObj(id).then((res) => {
                            this.$message.success("删除成功");
                        });
                    }
                }
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                console.log(this.$refs.upload)
                // return this.$confirm(`确定移除 ${ file.fileName }？`);
            },
            handleAvatarSuccess(res, file) {
               this.regulationForm.regulationFileIdsArray.push(res.data.fileId)
                console.log(res, file)
                // this.avatarUrl = URL.createObjectURL(file.raw);
            },
        }
    };
</script>
<style scoped="scoped" lang="scss">
.regulationInfo{
  .btns{
    text-align: right;
  }
  .view{
    .tt{
      .title{
        text-align: center;
        font-size: 20px;
        font-weight: bold;
      }
      .time{
        text-align: center;
        margin: 15px 0;
      }
    }
    .content{
      text-align: center;
    }
    p.fileDownloadTitle{
      margin: 30px 0 15px;
      color: #2d8cf0;
    }
  }
}
</style>